/* 通用样式重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* 选择房间列表样式 */
select {
	float: left;
	margin-bottom: 10px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 80%;
	min-width: 150px;
}


/* 输入框样式 */
input[type="text"] {
	float: left;
	margin-bottom: 10px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 80%;
	min-width: 150px;
}

/* 大文本框样式 */
textarea {
	float: left;
	width: 80%;
	height: 80%;
	resize: none;
	color: #343A40;
	ont-size: 16px;
	outline: none;
	text-indent: 2em;
	padding: 10px auto;
	border-radius: 5px;
	border: 2px solid #007BFF;
	background-color: #F8F9FA;
	font-family: Arial, sans-serif;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

textarea:focus {
	border-color: #28A745;
	background-color: #FFFFFF;
}


/* 按钮样式 */
button {
	height: 30%;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 5px;
	/* 最后一个按钮下不需要 */
}

/* 小按钮 */
.min-button {
	padding: 5px 10px;
	margin-left: 5px;
	background-color: #aaaaff;
	color: white;
}

.line-button {
	background-color: #ffaa7f;
	color: white;
	padding: 5px;
	margin-left: 5px;
}

/* 发送数据按钮样式 */
#send {
	background-color: #4CAF50;
	color: white;
}

/* 断开连接按钮样式 */
#dis {
	background-color: #f44336;
	color: white;
}

/* 重新连接的按钮样式 */
#again {
	background-color: #1e7aeb;
	color: white;
}


button:hover {
	filter: brightness(1.2);
}

.parent {
	display: grid;
	width: 100vw;
	height: 93vh;

	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(7, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.parent>div {
	border-left: 2px solid black;
	text-align: center;
}


.div1-title {
	grid-area: 1 / 1 / 2 / 7;
	text-align: center;
	font-size: 40px;
	font-weight: 700;
	/* 网格布局 */
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.div1-title-div1 {
	grid-area: 1 / 1 / 7 / 4;
	font-size: 15px;
	text-align: left;
	/* border: 2px solid #e3e3e3; */
}
.div1-title-div1 input {
	width: 60%;
	margin: 10px 20px;
}

.login {
	margin-top: 40px;
}


.div1-title-div2 {
	grid-area: 1 / 4 / 7 / 11;
	padding-top: 20px;
}

/* 配置列表 */
.div2-config {
	grid-area: 2 / 1 / 8 / 3;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.div2-config-div1 {
	grid-area: 1 / 1 / 2 / 3;
}

.div2-config-div2 {
	grid-area: 2 / 1 / 3 / 3;
}

.div2-config-div3 {
	grid-area: 3 / 1 / 4 / 3;
}

.div2-config-div4 {
	grid-area: 4 / 1 / 5 / 3;
}

.div2-config-div5 {
	grid-area: 5 / 1 / 6 / 3;
}

.div2-config-div6 {
	grid-area: 6 / 1 / 7 / 3;
}

.div2-config-div7 {
	grid-area: 7 / 1 / 9 / 6;
	border: 2px solid black;
	text-indent: 5px;
	text-align: left;
	overflow: auto;
}

.div2-config-div9 {
	grid-area: 1 / 3 / 2 / 9;
}

.div2-config-div10 {
	grid-area: 2 / 3 / 3 / 9;
}

.div2-config-div11 {
	grid-area: 3 / 3 / 4 / 9;
}

.div2-config-div12 {
	grid-area: 4 / 3 / 5 / 9;
}

.div2-config-div14 {
	grid-area: 7 / 6 / 9 / 9;
}

.div2-config-div15 {
	grid-area: 5 / 3 / 7 / 9;
}

/* 发送列表 */
.div3-send {
	grid-area: 2 / 3 / 8 / 5;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(10, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.div3-send-div1 {
	grid-area: 1 / 1 / 2 / 2;
	font-size: 30px;
	font-weight: 700;
}

.div3-send-div2 {
	grid-area: 2 / 1 / 11 / 2;
	overflow: auto;
}

/* 接收列表 */
.div4-receive {
	grid-area: 2 / 5 / 8 / 7;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(10, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.div4-receive-div1 {
	grid-area: 1 / 1 / 2 / 2;
	font-size: 30px;
	font-weight: 700;
}

.div4-receive-div2 {
	grid-area: 2 / 1 / 11 / 2;
	overflow: auto;
}


/* 单个信息单元的样式 */
/* 聊天气泡容器样式 */
.chat-message-container {
	display: flex;
	flex-direction: column;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f9f9f9;
	width: 90%;
	margin: 20px auto;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 消息头部样式，包含发送者名称、发送类型、发送时间等 */
.chat-message-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.chat-message-header>* {
	flex-shrink: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 发送者名称样式 */
.sender-name {
	font-weight: bold;
}

/* 发送类型和时间样式，可以根据需要调整 */
.send-type,
.send-time {
	color: #666;
}

/* 房间名称和接收者名称样式 */
.room-receiver-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

/* 消息内容样式 */
.message-content {
	border-top: 2px solid #d5d5d5;
	font-size: 14px;
	color: #333;
	line-height: 1.6;
	text-align: left;
	text-indent: 2em;
}



/* 自定义列表样式 */
dl {
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 20px;
}

/* 为<dt>（定义列表的术语/名称）设置样式 */
dt {
	font-weight: bold;
	/* 加粗术语 */
	margin-top: 10px;
	/* 顶部外边距，用于分隔术语 */
}

/* 为<dd>（定义列表的描述/值）设置样式 */
dd {
	margin-left: 20px;
	/* 左侧缩进，以清晰地区分术语和描述 */
	margin-bottom: 5px;
	/* 底部外边距，以分隔不同的描述 */
}

/* 显示logo */
.logo {
	width: 1em;
	height: 1em;
}